<template>
	<div class="toolbar">
		<!-- 头部导航 -->
		<div class="toolbar-wrapper">
			<div class="toolbar-wrapper__left">
				<slot name="left" />
			</div>
			<div class="toolbar-wrapper__right">
				<slot name="right" />
			</div>
		</div>
	</div>
</template>
 
<script>
export default {
	name: 'ToolBar',
	data() {
		return {};
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {}
	}
};
</script>
 
<style lang="scss">
.toolbar {
	width: 100%;
	.toolbar-wrapper {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		&__left {
			flex: 3;
			display: flex;
			align-items: center;
			min-width: 999px;
		}

		&__right {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
	}
}
</style>